<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        .board {
          width: 399px;
          height: 399px;
          border: 3px solid #654321;
          border-radius: 5px; /* 圆角 */
          margin: 10px;
          background-color: #deb887;
          /* 绘制横线 和 竖线 */
          background-image: linear-gradient(
              to bottom,
              transparent 39px,
              #654321 39px
            ), linear-gradient(to right, transparent 39px, #654321 39px);
          background-size: auto 40px, 40px auto;
        }
        /* 以下两个css选择器代码，看不懂没关系，不做要求，
          等后面学完 grid 网格布局和flex弹性布局后再回头看，就能理解*/
        .grid {
          display: grid; /* 网格布局*/
          /* 创建15x15网格 */
          grid-template-columns: repeat(10, 1fr);
          grid-template-rows: repeat(10, 1fr);
        }
        .grid .item {
          display: flex;
          align-items: center;
          justify-content: center;
        }
      </style>
      
      <div class="board grid">
        <!-- 每一格里面要放的内容，可以用后面学到的网格布局来实现 -->
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">4</div>
        <div class="item">4</div>
        <div class="item">4</div>
        <div class="item">4</div>
        <div class="item">4</div>
        <div class="item">4</div>
        <div class="item">4</div>
        <div class="item">4</div>
        <div class="item">4</div>
        <div class="item">4</div>
      </div>
</body>
</html>